<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../0js/vue.js"></script>
</head>
<style>
    .basic {
        width: 400px;
        height: 100px;
        border: 1px solid black;
    }

    .happy {
        border: 4px solid red;;
        background-color: rgba(255, 255, 0, 0.644);
        background: linear-gradient(30deg, yellow, pink, orange, yellow);
    }

    .sad {
        border: 4px dashed rgb(2, 197, 2);
        background-color: gray;
    }

    .normal {
        background-color: skyblue;
    }

    .chengheng1 {
        background-color: yellowgreen;
    }

    .chengheng2 {
        font-size: 30px;
        text-shadow: 2px 2px 10px red;
    }

    .chengheng3 {
        border-radius: 20px;
    }
</style>
<body>

<div id="root">
    <!--绑定class样式 字符串写法， 适合样式的类名不确定，需要动态指定-->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>

    <!--绑定class样式 数组写法， 类名个数不确定，名字也不确定-->
    <div class="basic" :class="arr">{{name}}</div>

    <!--绑定class样式 对象写法， 类名个数不确定，名字确定，要动态决定用不用-->
    <div class="basic" :class="classObj">{{name}}</div>


    <!--对象写法和数组对象写法-->
    <div class="basic" :style="styleObj">{{name}}</div>
    <div class="basic" :style="[styleObj, styleObj2]">{{name}}</div>

</div>

<script type="text/javascript">
    // 阻止vue在启动时生成生产提示
    Vue.config.productionTip = false

    const vm = new Vue({
        el: "#root",
        data: {
            name: "vue",
            mood: "normal",
            arr: ["chengheng1", "chengheng2", "chengheng3"],
            classObj: {
                chengheng1: false,
                chengheng2: true
            },
            styleObj: {
                fontSize: 40 + 'px'
            },
            styleObj2: {
                backgroundColor: "origin"
            }
        },
        methods: {
            changeMood() {
                let arr = ["happy", "sad", "normal"]
                let number = Math.floor(Math.random() * 3);
                this.mood = arr[number]
            }
        }
    });

</script>
</body>
</html>